<template>
            <div class="list_box">

                <div class="inv-h-w">
                    <div :class="['inv-h',$store.state.Inv==3?'inv-h-se':'']" @click="$store.state.Inv=3"><img src="../../assets/img/About/aixin_active.png" alt="" class="Collection">收藏</div>
                    <div :class="['inv-h',$store.state.Inv==0?'inv-h-se':'']" @click="$store.state.Inv=0">热门歌单</div>
                    <div :class="['inv-h',$store.state.Inv==1?'inv-h-se':'']" @click="$store.state.Inv=1">华语新歌</div>
                    <div :class="['inv-h',$store.state.Inv==2?'inv-h-se':'']" @click="$store.state.Inv=2">欧美新歌</div>
                </div>
                <div class="" v-show="$store.state.Inv == 0">
                 <div class="box box1">
                      <van-list
                        v-model="loading1"
                        :finished="finished1"
                        finished-text="没有更多了"
                        @load="onLoad1"
                        offset="50"
                      >
                      <li class="info"><img src="../../assets/img/shuaxin.png" class="quanbu shuaxin" alt="" @click="reload"><span class="fr" @click="quanbu(listData1)"><img src="../../assets/img/quanbu.png" alt="" class="quanbu">列表随机</span></li>
                      <li class="info" v-for="(item,index) in Data1" :key="index" @click="navTo($event,index,item.hash,item.album_id)">
                        <img src="../../assets/img/add.png" alt="" class="add" @click.stop="add(item.hash,item.album_id)">
                        <span class="filename">{{item.filename||''}}</span>
                        <span class="duration">{{item.duration||''}}</span>
                        <img :src="$store.state.play==false?require('../../assets/img/pause.png'):require('../../assets/img/bofang.png')"  :class="['bofang',$store.state.listIndex==1&&$store.state.bof==item.hash?'show':'']" />
                      </li>
                      </van-list>
                  </div>
                </div>
                <div class="" v-show="$store.state.Inv == 1">
                  <div class="box box2">
                      <van-list
                        v-model="loading2"
                        :finished="finished2"
                        finished-text="没有更多了"
                        @load="onLoad2"
                        offset="50"
                      >
                      <li class="info"><img src="../../assets/img/shuaxin.png" class="quanbu shuaxin" alt="" @click="reload"><span class="fr" @click="quanbu(listData2)"><img src="../../assets/img/quanbu.png" alt="" class="quanbu">列表随机</span></li>
                      <li class="info" v-for="(item,index) in Data2" :key="index" @click="navTo($event,index,item.hash,item.album_id)">
                        <img src="../../assets/img/add.png" alt="" class="add" @click.stop="add(item.hash,item.album_id)">
                        <span class="filename">{{item.filename||''}}</span>
                        <span class="duration">{{item.duration||''}}</span>
                        <img :src="$store.state.play==false?require('../../assets/img/pause.png'):require('../../assets/img/bofang.png')"  :class="['bofang',$store.state.listIndex==2&&$store.state.bof==item.hash?'show':'']" />
                      </li>
                      </van-list>
                  </div>
                </div>
                <div class="" v-show="$store.state.Inv == 2">
                      <div class="box box3">
                        <van-list
                          v-model="loading3"
                          :finished="finished3"
                          finished-text="没有更多了"
                          @load="onLoad3"
                          offset="50"
                        >
                        <li class="info"><img src="../../assets/img/shuaxin.png" class="quanbu shuaxin" alt="" @click="reload"><span class="fr" @click="quanbu(listData3)"><img src="../../assets/img/quanbu.png" alt="" class="quanbu">列表随机</span></li>
                        <li class="info" v-for="(item,index) in Data3" :key="index" @click="navTo($event,index,item.hash,item.album_id)">
                          <img src="../../assets/img/add.png" alt="" class="add" @click.stop="add(item.hash,item.album_id)">
                          <span class="filename">{{item.filename||''}}</span>
                          <span class="duration">{{item.duration||''}}</span>
                          <img :src="$store.state.play==false?require('../../assets/img/pause.png'):require('../../assets/img/bofang.png')"  :class="['bofang',$store.state.listIndex==3&&$store.state.bof==item.hash?'show':'']" />
                        </li>
                        </van-list>
                      </div>
                </div>
                <div class="" v-show="$store.state.Inv == 3">
                  <div class="box box4">
                      <ul>
                        <li class="info"><span class="fr" @click="shoucang(Data4)"><img src="../../assets/img/quanbu.png" alt="" class="quanbu">列表随机</span></li>
                        <li class="info" v-for="(item,index) in Data4" :key="index" @click="navTo($event,index,item.hash,item.album_id)" v-if="Data4.length==0?false:true">
                          <img src="../../assets/img/add.png" alt="" class="add" @click.stop="add(item.hash,item.album_id)">
                          <span class="filename">{{item.filename||''}}</span>
                          <span class="del" @click.stop="delShou(index)">x</span>
                        </li>
                        <li class="info info3" v-if="Data4.length==0?true:false">暂无收藏</li>
                      </ul>
                  </div>
                </div>
             </div>
</template>
<script>
import Vue from 'vue';
import { List } from 'vant';
import { get, post } from '../../../utils/request.js';

Vue.use(List);
export default {
  data() {
    return {
      bofang: false, // 列表右边的播放图标
      listData1: [], // 装本地存储的数组
      listData2: [], // 装本地存储的数组
      listData3: [], // 装本地存储的数组
      loading1: false,
      loading2: false,
      loading3: false,
      finished1: false,
      finished2: false,
      finished3: false,
      Data1: [], // 装显示数据的数组
      Data2: [], // 装显示数据的数组
      Data3: [], // 装显示数据的数组
      Data4: [], // 装显示数据的数组
      index1: 0, // 加载列表的索引。
      index2: 0, // 加载列表的索引。
      index3: 0, // 加载列表的索引。
      str: '', // 存放添加失败的歌曲名
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
  },
  // props:['listData'],
  mounted() {
    if (localStorage.getItem('list4') != null) this.Data4 = JSON.parse(localStorage.getItem('list4'));
    if (localStorage.getItem('list1') == null) {

    } else {
      this.listData1 = JSON.parse(localStorage.getItem('list1'));
      this.Data1 = this.listData1[0];
    }

    if (localStorage.getItem('list2') != null) {
      this.listData2 = JSON.parse(localStorage.getItem('list2'));
      this.Data2 = this.listData2[0];
    }
    if (localStorage.getItem('list3') != null) {
      this.listData3 = JSON.parse(localStorage.getItem('list3'));
      this.Data3 = this.listData3[0];
    }
  },
  watch: {
    listData(n, o) {
      if (this.$store.state.Inv == 0) {
        this.handleReflesh('index1','loading1','finished1','listData1','Data1',n)
      } else if (this.$store.state.Inv == 1) {
        this.handleReflesh('index2','loading2','finished2','listData2','Data2',n)
      } else {
        this.handleReflesh('index3','loading3','finished3','listData3','Data3',n)
      }
    },
  },
  methods: {
    handleReflesh(index,loading,finished,listData,Data,n){
      this[index] = 0, // 加载列表的索引。
      this[loading] = true
      this[finished] = false
      this[listData] = n;
      this[Data] = this[listData][0];
      setTimeout(()=>{
        this[loading] = false
      },500)
    },
    // 上拉加载函数
    shangLa( Inv, listData, index, Data, loading, finished) {
        if (this.$store.state.Inv == Inv && this.[finished] == false) {
          setTimeout(() => {
            if (this.[listData].length > 1) {
              if (this.[index] < this.[listData].length) {
                this.[index]++;// 下拉一次
                let i = this[index]
                this[Data]=this[Data].concat(this[listData][i])
              }
            }
            // 加载状态结束
            this.[loading] = false;
            // 数据全部加载完成
            if (this.[index] == this.[listData].length - 1) {
              this.[finished] = true;
            }
          }, 1000);
        }
    },
    remove(time, list) {
      localStorage.removeItem(list);
      localStorage.removeItem(time);
      this.$emit('reflesh');
    },
    // 刷新列表
    reload() {
      const { Inv } = this.$store.state;
      if (Inv == 0) {
        this.remove('time1', 'list1');
      } else if (Inv == 1) {
        this.remove('time2', 'list2');
      } else if (Inv == 2) {
        this.remove('time3', 'list3');
      }
    },
    // 收藏的删除功能
    delShou(index) {
      const arr = JSON.parse(localStorage.getItem('list4'));
      arr.splice(index, 1);
      localStorage.setItem('list4', JSON.stringify(arr));
      this.Data4 = JSON.parse(localStorage.getItem('list4'));
    },
    // 列表左边的+
    add(hash, album_id) {
      const store = this.$store.state;
      for (let i = 0; i < store.list.length; i++) {
        if (store.list[i].hash == hash) {
          const shuzu = store.list[i];
          store.list.splice(i, 1);// 添加下一首歌的信息
          store.list.push(shuzu);
          this.$toast('已成功添加到播放队列');
          return;
        }
      }
      post(`https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash=${hash}&album_id=${album_id}&dfid=1ZxK2M2ZbSkB0wBOnV173l7y&mid=ac9eb74c90f1f717b99aaab44a337f67&platid=4&_=1600657413199`, {}).then((res) => {
        const arr = {};
        const { data } = res.data;
        if (data.play_url == '') {
          this.$toast.fail('添加失败');// vant组件提示失败
          return;
        }
        if (data.is_free_part == 1) {
          this.$toast.fail('添加为试听歌曲');// vant组件提示失败
        }
        arr.hash = data.hash;
        arr.title = data.audio_name.split(' - ')[1];
        arr.author = data.audio_name.split(' - ')[0];
        if (data.play_url != '') arr.src = data.play_url;
        arr.img = data.img;
        arr.album_id = data.album_id;
        arr.lyric = [];
        data.lyrics.split(/\n/).forEach((item) => {
          if (item.split(']')[1] != '\r' && item.split(']')[1] != undefined) {
            const obj = { time: `${item.split(']')[0]}]`, name: item.split(']')[1] };
            arr.lyric.push(obj);
          }
        });
        store.list.push(arr);
        this.$toast('已成功添加到播放队列');
      });
      if (store.list.length == 0) {
        document.querySelector('audio').load();
      }
    },
    // 全部播放
    quanbu(data) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      const audio = document.querySelector('audio');
      audio.pause();
      const store = this.$store.state;
      store.musicIndex = 0;
      store.list.splice(0, store.list.length);
      data.forEach((item) => {
        item.forEach((item) => {
          const { hash } = item;
          const { album_id } = item;
          post(`https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash=${hash}&album_id=${album_id}&dfid=1ZxK2M2ZbSkB0wBOnV173l7y&mid=ac9eb74c90f1f717b99aaab44a337f67&platid=4&_=1600657413199`, {}).then((res) => {
            const arr = {};
            const { data } = res.data;
            const str = '';
            if (data.play_url == '') {
              const song_name = data.audio_name.split(' - ')[1];
              this.str += `${song_name}、`;// 添加错误的歌名
            } else {
              arr.hash = data.hash;
              arr.title = data.audio_name.split(' - ')[1];
              arr.author = data.audio_name.split(' - ')[0];
              if (data.play_url != '') arr.src = data.play_url;
              arr.img = data.img;
              arr.lyric = [];
              data.lyrics.split(/\n/).forEach((item) => {
                if (item.split(']')[1] != '\r' && item.split(']')[1] != undefined) {
                  const obj = { time: `${item.split(']')[0]}]`, name: item.split(']')[1] };
                  arr.lyric.push(obj);
                }
              });
              // store.list[store.musicIndex+1]=arr;//覆盖当前索引的下一首歌的信息
              store.list.push(arr);
            }
          });
        });
      });
      setTimeout(() => {
        // this.$toast.fail();//vant组件提示失败
        if (this.str.length > 0) {
          this.str = this.str.slice(0, this.str.length - 1);
          this.str += '添加失败！';
          // this.$toast()
          this.$toast({
            duration: 3000,
            message: this.str,
          });
        }

        store.bof = store.list[store.musicIndex].hash;
        this.$router.push({
          name: 'About',
          query: {
            hash: '',
          },
        });
      }, 3000);

    },
    // 收藏的列表随机
    shoucang(data) {
      if (data.length < 1) {
        return;
      }
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      const audio = document.querySelector('audio');
      // audio.src='';
      audio.pause();
      // this.$store.state.list=
      const store = this.$store.state;
      store.list.splice(0, store.list.length);
      store.musicIndex = 0;
      data.forEach((item) => {
        const { hash } = item;
        const { album_id } = item;
        post(`https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash=${hash}&album_id=${album_id}&dfid=1ZxK2M2ZbSkB0wBOnV173l7y&mid=ac9eb74c90f1f717b99aaab44a337f67&platid=4&_=1600657413199`, {}).then((res) => {
          const arr = {};
          const { data } = res.data;
          arr.hash = data.hash;
          arr.title = data.audio_name.split(' - ')[1];
          arr.author = data.audio_name.split(' - ')[0];
          if (data.play_url != '') arr.src = data.play_url;
          arr.img = data.img;
          arr.lyric = [];
          data.lyrics.split(/\n/).forEach((item) => {
            if (item.split(']')[1] != '\r' && item.split(']')[1] != undefined) {
              const obj = { time: `${item.split(']')[0]}]`, name: item.split(']')[1] };
              arr.lyric.push(obj);
            }
          });

          // store.list[store.musicIndex+1]=arr;//覆盖当前索引的下一首歌的信息
          store.list.push(arr);
        });
      });
      setTimeout(() => {
        store.bof = store.list[store.musicIndex].hash;
        this.$router.push({
          name: 'About',
          query: {
            hash: '',
          },
        });
      }, 3000);

    },

    navTo(e, index, hash, album_id) {
      if (e.currentTarget.parentElement.parentElement.className == 'box box2') {
        this.$store.state.listIndex = 2;
      } else if (e.currentTarget.parentElement.parentElement.className == 'box box1') {
        this.$store.state.listIndex = 1;
      } else if (e.currentTarget.parentElement.parentElement.className == 'box box3') {
        this.$store.state.listIndex = 3;
      }
      this.$store.state.bof = hash;
      this.$router.push({
        name: 'About',
        query: {
          hash,
          album_id,
        },
      });
    },

    onLoad1() {
      // listLoad,Inv,listData,index,loading,finished,listLoad
      this.shangLa( 0, 'listData1', 'index1', 'Data1', 'loading1', 'finished1');
    },
    onLoad2() {
      this.shangLa( 1, 'listData2', 'index2', 'Data2', 'loading2', 'finished2');
    },
    onLoad3() {
      this.shangLa( 2, 'listData3', 'index3', 'Data3', 'loading3', 'finished3');
    },
  },
};
</script>

<style>
        .inv-h-w{background-color: #FFFFFF;height: 85px;display: flex;}
        .inv-h{font-size: 30px;flex: 1;text-align: center;color: #C9C9C9;height: 85px;line-height: 85px;}
        .inv-h-se{color: #5BA7FF;border-bottom: 2px solid #5BA7FF;}
     .list_box{
       background-color: #f2f2f2;
       padding-bottom: 20px;
     }
		.box{
			width: 90%;
			height: auto;
			background-color: #fff;
			margin: 20px auto;
			border-radius: 10px;
			box-shadow: 0 10px 15px 0px #ddd;
		}
		.box ul{
		}

		.box li{
			list-style: none;
			display: flex;
			min-height: 60px;
			border-bottom: 1px solid #ccc;
			padding: 10px 0 5px;
      width: 90%;
      margin:0 auto;
			line-height: 60px;
		}
		.box li:last-of-type{
			border-bottom: none;
		}
		.box .info{
			display: flex;
			justify-content:space-between;
		}
    .info3{
      display: flex;
      justify-content:center;
      text-align: center;
      margin: 0 auto;
    }

    .quanbu{
      width: 40px;
      height: 40px;
      display: block;
      float: right;
      margin-top: 8px;
    }
		.box .info span.filename{
			flex:3.5;
			font-size: 28px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
      text-indent: 0.5em;
		}
		.box .info span.duration{
			font-size: 20px;
			color: #666;
			flex:1;
		}
		.box .info .bofang{
			display: none;
			width: 30px;
      height: 37px;
      margin-top: 8.5px;
      position: absolute;
      right: 10%;
		}
		.box .info .show{
			display: block;
		}
    .add{
      width: 40px;
      height: 40px;
      margin-top: 8px;
    }
    .fr{
      font-size: 30px;
      position: absolute;right: 9%;
    }
    .Collection{
      width: 40px;
      height: 40px;
      margin: 21px 0 0 0px;
      vertical-align: top;
    }
    .box4 .del{
			flex:0.2;
      font-size: 20px;padding-left: 20px;
    }
    .shuaxin{
      width: 32px;height: 32px;margin-left: 2%;
    }
</style>
